<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-if="layout === 'sider'" v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <img
          src="../src/components/menus/logo.png"
          width="64px"
          height="64px"
        />
      </div>
      <Aside :menus="menus"></Aside>
    </a-layout-sider>
     <a-layout-header v-if="layout === 'header'" style="background: #001529; padding: 0">
        <Header
          :collapsed="collapsed"
          @toggleCollapse="toggleCollapse"
        ></Header>
      </a-layout-header>

    <a-layout>
      <a-layout-sider v-if="layout === 'header'" v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" v-if="layout === 'sider'">
        <img
          src="../src/components/menus/logo.png"
          width="64px"
          height="64px"
        />
      </div>
      <Aside :menus="menus"></Aside>
    </a-layout-sider>
      <a-layout-header v-if="layout === 'sider'" style="background: rgb(255 255 255); padding: 0;box-shadow: 2px 2px 7px 1px rgb(206 209 213)">
        <Header
          :collapsed="collapsed"
          @toggleCollapse="toggleCollapse"
        ></Header>
      </a-layout-header>

      <!-- 右边内容 -->
      <a-breadcrumb style="font-size: 20px; margin: 5px">
        <a-breadcrumb-item><a href="/">Home</a></a-breadcrumb-item>
        <a-breadcrumb-item v-if="name">{{name}}</a-breadcrumb-item>
      </a-breadcrumb> 
      <a-layout-content
        :style="{
          background: '#fff',
          padding: '24px',
          margin: 0,
          minHeight: '280px',
        }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import axios from "axios";
import Aside from "./components/menus/Aside.vue";
import Header from "./components/menus/Header.vue";
import { mapState } from "vuex";

export default {
  components: { Aside, Header },
   computed: {
    ...mapState(['asyncRoutes','menuData']),
  },
  updated() {
    this.name = this.$route.name;
  },
  data() {
    return {
      collapsed: false,
      name: '',
      layout: 'sider',
      menus: this.asyncRoutes? this.menuDate : this.$router.options.routes,
    };
  },
  created() {
    this.getUser();
    // console.log('------', this.asyncRoutes)
    console.log("菜单列表---", this.menuDate);
  },
  methods: {
    toggleCollapse(val) {
      this.collapsed = val;
    },
    getUser() {
      axios
        .get("http://localhost:5200/gege/sys/menu/tree", {
          params: {
            category: 0,
          },
        })
        .then((res) => {
          let dataList = [];
          dataList = res.data.data[0].children;
          dataList.forEach((item) => {
            item["name"] = item.name;
            item["path"] = "/page/page/" + item.orderNo;
          });
          let Obj = this.menus.find((item) => item.name == "page");
          Obj.children = dataList;
        })
        .catch((err) => {
          throw err;
        });
    },
  },
};
</script>

<style lang="scss">
#components-layout-demo-custom-trigger {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  display: flex;
  p {
    font-size: 20px;
    padding: 5px;
    margin: auto 0;
  }
}
</style>
